<template>
    <div class="box">
        <h3>菜谱列表</h3>
        <div id="teacherChart" style="width: 500px; height: 400px"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            charts: "",
            opinion: [],
            opinionData: [],
            arr: []
        };
    },
    methods: {
        drawPie(id) {
            this.charts = echarts.init(document.getElementById(id));
            this.charts.setOption({
                legend: {
                    top: 'bottom'
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [50, 150],
                        center: ['50%', '40%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: this.opinionData
                    }
                ]
            });
        },
        getClasses() {
            this.$api.menuApi.findAllMenu({ pageSize: 15 }).then(({ data }) => {
                console.log(data);
                let arr = data.menus
                // console.log(arr);

                arr.forEach(v => {
                    this.opinion.push(v.name)
                    this.opinionData.push({ value: 1, name: v.name })
                });
                this.drawPie("teacherChart");
            })

        }
    },
    created() {
        this.getClasses();
    }
};
</script>

<style scoped>
.box {
    background-color: #fff;
    padding: 10px;
    width: 570px;
    /* height: 400px; */
}
</style>